<template>
  <div id="map-container"></div>
</template>
<script setup lang='ts'>
import { onMounted } from 'vue';
import 'ol/ol.css'
import { Map, View } from 'ol'
import { Vector as VectorLayer } from 'ol/layer';
import { Vector as VectorSource } from 'ol/source';
import GeoJSON from 'ol/format/GeoJSON';
import { Style, Fill as StyleFill, Stroke as StyleStroke } from 'ol/style'
import { useTianTileLayer, projection } from '@/hooks'
import { TiandiTileLayerConfigEnum } from '@/enum'

// geo下载地址(https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=26.30662600587793&lng=118.28348353816342&zoom=7.5)
// 单独导入
import chinaJson from '@/assets/geo/china.json'

// 统一导入geojson获取
// const geoModules = import.meta.glob('@/assets/geo/**/*.json')
// for(let k in geoModules) {
//   if(geoModules.hasOwnProperty(k)) {
//     console.log(k)
//     geoModules[k]().then((res: any) => {
//       console.log(res.default)
//     })
//   }
// }
let map: Map

onMounted(() => {
  initMap()
})

// 初始化地图
function initMap() {
  map = new Map({
    target: 'map-container',
    layers: [ ...useTianTileLayer(TiandiTileLayerConfigEnum.SL) ],
    view: new View({
      center: [104.574807,35.980506],
      projection: projection,
      zoom: 4,
      maxZoom: 17,
      minZoom: 1
    })
  })
  addGeoJson(chinaJson)
}

function addGeoJson(json: any) {
  const vectorSource = new VectorSource({
    features: new GeoJSON().readFeatures(json)
  });
  const vectorLayer = new VectorLayer({
    source: vectorSource,
  });
  vectorLayer.setStyle(new Style({
    fill: new StyleFill({
      color: 'rgba(255, 220, 0, 0.4)'
    }),
    stroke: new StyleStroke({
      color: 'blue',
      width: 1
    })
  }))
  map.addLayer(vectorLayer)
}
</script>
<style scoped>
#map-container {
  width: 100%;
  height: 100%;
  position: relative;
}
</style>